<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>元素显示模式</title>
  <style>
    div
    {
      /*块级*/
      width: 100px;
      height: 100px;
      border: 5px solid red;
      display: block;
    }
    /*行级*/
    span {
      width: 150px;
      height: 150px;
      background-color: #ff0000;
      /*无法自设宽高 默认大小按内容撑起来，横着排*/
      display: inline;
      /*加上才会使宽高生效*/
      display: block;
    }
    /*行内块元素 ： 即像行内元素横着拍，也像块级元素可以设置宽高*/
    input,span{
      width: 100px;
      height: 100px;
      background-color: pink;
      display: inline-block;
    }
    .d2
    {
      /*元素消失 此种方式会脱离文档流，释放布局空间*/
      display: none;
    }

  </style>
</head>
<body>
<div class="d1">111</div>
<div class="d2">222</div>
<div class="d3">333</div>
<span>
1234567
</span>
<span>
  asdfgh
</span>
<span>
  123435677xdfvcbgn
</span>
<hr>
嘻嘻 <input type="text">

<button>提交</button>


</body>
</html>